<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08-节点操作</title>
</head>

<body>
  <!-- 节点的优点 -->
  <div>我是div</div>
  <span>我是span</span>

  <ul>
    <li>我是li第一</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li最后</li>
  </ul>
  <ol>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
  </ol>
  <div class="demo">
    <div class="box">
      <span class="erweima"></span>
    </div>
  </div>

  <script>
    // var box = document.querySelector('.box');
    // console.dir(box);

    // 1. 父节点 parentNode：返回的是里它最近的一级父节点
    var erweima = document.querySelector('.erweima');
    console.log(erweima.parentNode);

    // 2. 子节点 childNodes: 获取所有子节点，包含元素节点 文本节点等
    var ul = document.querySelector('ul');
    console.log(ul.childNodes);

    // 3. children: 获取所有子元素节点 也就是我们实际开发过程使用的
    console.log(ul.children);

    // 4. 第一个子节点 与 最后一个子节点
    // a. firstChild: 返回第一个子节点 不管是否为元素节点
    // b. lastChild: 同理 最后一个
    console.log(ul.firstChild);
    console.log(ul.lastChild);

    // c. firstElementChild: 返回第一个元素节点
    // d. lastElementChild: 返回最后一个元素节点
    console.log(ul.firstElementChild);
    console.log(ul.lastElementChild);

    // 5. 实际开发写法
    console.log(ul.children[0]);
    console.log(ul.children[ul.children.length - 1]);
  </script>
</body>

</html>